<template>
  <div class="main">
    
    <div v-if='isShow'>
      <img src="@/assets/img/bike-banner.jpg" alt="">
        <div class="formLogin" >
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="登录" name="first">
                <el-form  
                      ref="userInfo" 
                      :model="userInfo"
                      label-width="130px"         
                      :rules="rules"         
                      :inline="true"                              
                  >
                      <el-form-item label="手机号" prop='phonenumber'>
                        <el-input v-model="userInfo.phonenumber"></el-input>
                      </el-form-item>     
                      <el-form-item label="密码" prop='password'>
                        <el-input v-model="userInfo.password"></el-input>
                      </el-form-item>                                                            
                      <el-form-item class="login_form">
                        <el-button type="primary" @click="onSubmit()">登录</el-button>              
                      </el-form-item>
                      <div class="changeCode" @click='changeCode'>
                      <span>手机验证码登录</span>             
                    </div>
                  </el-form>    
              </el-tab-pane>
              <el-tab-pane label="注册" name="second">
                <el-form  
                      ref="userInfo" 
                      :model="userInfo"
                      label-width="auto"         
                      :rules="rule1"   
                      :inline="true"                                    
                  >
                      <el-form-item label="昵称" prop="username">
                        <el-input v-model="userInfo.username"></el-input>
                      </el-form-item>  
                      <el-form-item label="手机号" prop='phonenumber'>
                        <el-input v-model="userInfo.phonenumber"></el-input>
                      </el-form-item>     
                      <el-form-item label="密码" prop='password'>
                        <el-input v-model="userInfo.password"></el-input>
                      </el-form-item> 
                      <el-form-item label="再次输入密码" prop='checkPassword'>
                        <el-input v-model="userInfo.checkPassword"></el-input>
                      </el-form-item>   
                      <el-form-item label="身份证号码" prop="idnumber">
                        <el-input v-model="userInfo.idnumber"></el-input>
                      </el-form-item>  
                      <el-form-item label="地址" >
                        <el-input v-model="userInfo.address"></el-input>
                      </el-form-item>                                                                       
                      <el-form-item class="login_form">
                        <el-button type="primary" @click="onRegister">注册</el-button>              
                      </el-form-item>
                      <div class="changeCode" @click='changeCode'>
                      <span>手机验证码登录</span>             
                    </div>
                  </el-form>  
              </el-tab-pane>          
            </el-tabs>
            
        </div>
    </div>

    <profile-view v-else></profile-view>
  </div>
</template>

<script>
// import registerView from '@/views/Register/register.vue'


import {pwdLogin,identityInfo} from '@/networdk/user'
import { Message } from 'element-ui'


import profileView from '../Profile/profile.vue'
export default {
  name:'loginView',
  data() {
    let checkPhone = (rule,value,callback)=>{
      let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
     
      if(!value){
        callback()
      } else {
        if(phoneReg.test(value)){
          callback()
        } else{
          callback(new Error('手机号不能为空，并且是11位数字'))
        }
      }
    }
     let checkPwd = (rule,value,callback)=>{
      let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/
     
      if(!value){
        callback()
      } else {
        if(pwdReg.test(value)){
          callback()
        } else{
          callback(new Error('密码不能为空，且是6-15位的数字和字母组成'))
        }
      }
    }     
    let checkIdnumber = (rule,value,callback)=>{
              let idnumberReg = /^[1-9]\d{5}(19|20|21)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/              
              if(!value){
                  callback()
              } else {
                  if(idnumberReg.test(value)){
                  callback()
                  } else{
                  callback(new Error('身份证号码不能为空'))
                  }
              }
    }
    let checkAgainpwd = (rule,value,callback)=>{
        // let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/
        
        if(!value){
            callback()
        } else {
            if(value === this.userInfo.password ){
                callback()
            } else{
                callback(new Error('两次输入密码不一致'))
            }
        }
    }
    let checkUserName = (rule,value,callback)=>{
        let usernameReg = /^[\u4e00-\u9fa5]{2,5}$/
        
        if(!value){
            callback()
        } else {
            if(usernameReg.test(value)){
            callback()
            } else{
            callback(new Error('用户名不能为空，且是 2~5个汉字组成'))
            }
        }
    }
    return {
        isCode:0, // 0表示登录。1表示注册
        userInfo:{
          phonenumber : '',
          password:'',
          identity:'用户',
          type:[] , 
          username:'',
          checkPassword:'',
          idnumber:'',
          address:''

        },
        // isShow:false,
        activeName:'first',                      
        rules:{
         phonenumber: [
            {
              required:'true',
              trigger:'blur',                            
              validator:checkPhone,
              message:'手机号不能为空，并且是11位数字',
            }
          ],
          password:[
            {
              required:'true',
              trigger:'blur',             
              validator:checkPwd,
              message:'密码是6-15位的数字和字母组成'
            }
          ]          
        },

        rule1:{
          username:[
              {
                required : 'true' ,                
                trigger: 'blur',
                validator:checkUserName,
                message : '请输入2~5位昵称'
                }
                        
            ],
            address:[
                {
                    required : true , message : '请输入地址',trigger: 'blur'},                       
            ],
            idnumber:[
                {
                    required : true , 
                    message : '请输入合法的身份证号码',
                    trigger: 'blur',
                    validator:checkIdnumber
                },                       
            ],
            password:[
                {required : true , message : '密码是6-15位的数字和字母组成',trigger: 'blur',validator:checkPwd},                       
            ],
            checkPassword:[
                  {
                    required:'true',
                    trigger:'blur',                            
                    validator:checkAgainpwd,
                    message:'两次输入密码不一致',
                }
            ],
            phonenumber: [
                {
                required:'true',
                trigger:'blur',                            
                validator:checkPhone,
                message:'手机号不能为空，并且是11位数字',
                }
            ],
        }              
    }
  },    
  updated() {
    this.isShow()
  }, 
  computed:{
    isShow(){      
      if(this.$store.state.token){
         return false
      } else {
        return true
      }
    }
  },
  components:{
    profileView
  },
  methods: {
   
    register(){
      console.log('点击了注册');
      
      this.$router.push('/register')
    },

    // 手机号+密码登录
    onSubmit(){
      const _Message = Message     
      this.$refs.userInfo.validate((valid)=>{
        console.log(valid);
        if(!valid){          
          _Message({
            type:'error',
            message:'请输入正确的信息格式'
          })
          return;
        } else {        
              let phonenumber = this.userInfo.phonenumber
              let password = this.userInfo.password
              
              // console.log(phonenumber,password);
              pwdLogin({phonenumber,password}).then(res=>{
                console.log('进入密码登录界面');
                console.log(res);      

                if(res.data.code === 0){
                    _Message({
                      type:'success',
                      message:res.data.data.msg
                      // 跳转页面
                    })
                    console.log(res.data.data.data[0].token);
                    let  userToken = 'Bearer' + res.data.data.data[0].token
                    this.$store.commit('setToken',userToken)
                    this.$router.replace('/')
                  
                } else {
                    _Message({
                      type:'warning',
                      message:res.data.data.msg
                    })
                }
              })               
        }        
      })
    },

    // 注册
     onRegister(){
      const _Message = Message     
      this.$refs.userInfo.validate((valid)=>{
        console.log(valid);
        // if(!valid){          
        //   _Message({
        //     type:'error',
        //     message:'请输入正确的信息格式'
        //   })
        //   return;
        // } else {    
        //       console.log('*******11******');    
        //       let phonenumber = this.userInfo.phonenumber
        //       let password = this.userInfo.password
        //       let identity = this.userInfo.identity
        //       console.log(phonenumber,password,identity);
        //       identityInfo({phonenumber,identity}).then(res=>{
        //         console.log('进入注册界面');
        //         console.log(res);      

        //         // if(res.data.code === 0){
        //         //     _Message({
        //         //       type:'success',
        //         //       message:res.data.data.msg
        //         //       // 跳转页面
        //         //     })
        //         //     console.log(res.data.data.data[0].token);
        //         //     let  userToken = 'Bearer' + res.data.data.data[0].token
        //         //     this.$store.commit('setToken',userToken)
        //         //     this.$router.replace('/')
                  
        //         // } else {
        //         //     _Message({
        //         //       type:'warning',
        //         //       message:res.data.data.msg
        //         //     })
        //         // }
        //       })               
        // }        
      })
    },
    // 手机号+验证码登录
    codeLogin(){
      this.userInfo = {}
      this.$refs.userInfo.clearValidate()
      this.$refs.codeInfo.validate((valid)=>{
        console.log(valid);
      })
    },
    // 切换到用验证码登录
    changeCode(){
        this.$emit('changeCode')
    },


    // 切换到用密码登录
    changePwd(){
      this.isShow = !this.isShow
      // this.isCode = 1
    },
    sendCode(){
      
      console.log('获取短信验证码');
    }    
  },
}
</script>

<style scoped>
.main{
  width: 100%;
  height: 600px;
  position: relative;
}
.main img{
  width: 100%;
  height: 100%;
}

.formLogin{
  width: 718px;
  height: 400px;
  border: 1px solid red;
  position: absolute;
  top: 55px;
  right: 72px;
  background-color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


.formLogin .el-form{
  border: 1px solid red;

}


.el-form-item__label-wrap{ 
  margin-left: 0px !important;
 }

.login_form{
  display: flex;
  justify-content: center;
}
 .el-button{
   width:200px;
   border: 1px solid red;
 }
</style>